<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
import { GetVersionStatusApi } from '@/api/role'
import { getTreeDepartmentsApi } from '@/api/department'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { ElTag } from 'element-plus'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import { BaseButton } from '@/components/Button'
// import { asyncRouterMap } from '@/router'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const { t } = useI18n()

const props = defineProps({
  versionGuid: {
    type: String,
    default: () => ''
  }
})
const searchParams = ref()
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await GetVersionStatusApi({
      pageNo: unref(currentPage),
      pageRow: unref(pageSize),
      pageModel: { ...unref(searchParams), versionGuid: props.versionGuid }
    })
    return {
      list: res.data.pageModels || [],
      total: res.data.totalCount
    }
  }
})

const departmentList = ref([])
const fetchDepartment = async () => {
  const res = await getTreeDepartmentsApi({})
  departmentList.value = res.data
}
fetchDepartment()
const { dataList, loading, total, pageSize, currentPage } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  {
    field: 'deviceNo',
    label: t('device.deviceNo')
  },
  {
    field: 'deviceName',
    label: t('device.deviceName')
  },
  {
    field: 'deviceType',
    label: t('device.deviceType')
  },
  {
    field: 'stationNo',
    label: t('device.stationNo')
  },
  {
    field: 'stationName',
    label: t('device.stationName')
  },
  {
    field: 'depNo',
    label: t('userDemo.depNo')
  },
  {
    field: 'depGuid',
    label: t('userDemo.department')
  },
  {
    field: 'status',
    label: '状态'
  },
  {
    field: 'upgradeTime',
    label: '更新时间'
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'depGuid',
    label: t('userDemo.department'),
    component: 'TreeSelect',
    componentProps: {
      nodeKey: 'guid',
      props: {
        label: 'depName',
        value: 'guid',
        children: 'children'
      },
      placeholder: '请选择部门',
      highlightCurrent: true,
      expandOnClickNode: false,
      checkStrictly: true,
      checkOnClickNode: true,
      clearable: true
    },
    optionApi: async () => {
      return departmentList.value || []
    }
  },
  {
    field: 'stationNo',
    label: '采集站编号',
    component: 'Input'
  },
  {
    field: 'deviceType',
    label: '设备类型',
    component: 'Input'
  },
  {
    field: 'status',
    label: '升级状态',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '未升级',
          value: '未升级'
        },
        {
          label: '升级成功',
          value: '升级成功'
        },
        {
          label: '升级失败',
          value: '升级失败'
        }
      ]
    }
  },
  {
    field: 'date',
    label: t('problem.time'),
    component: 'DatePicker',
    componentProps: {
      style: { width: '340px' },
      type: 'datetimerange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      StartPlaceholder: 'Start date',
      EndPlaceholder: 'End date'
    }
  }
])

const setSearchParams = (params: any) => {
  if (params.date) {
    params.startTime = params.date[0]
    params.endTime = params.date[1]
    delete params.date
  }
  searchParams.value = params

  getList()
}
</script>

<template>
  <ContentWrap>
    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />

    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :reserveIndex="true"
      :columns="tableColumns"
      default-expand-all
      node-key="guid"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
